import { ReactNode } from 'react';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import ReactSlider, { Settings } from 'react-slick';

import cn from 'classnames';

import cs from './Slider.module.scss';

export const Slider = ({
  slides,
  className,
  arrows = false,
  ref,
  isInfinite = true,
  isAdaptiveHeight = true,
  initialSlideIndex = 0,
  settings = {},
}: {
  className?: string;
  isInfinite?: boolean;
  ref?: any;
  arrows?: boolean;
  slides?: unknown & { id: number; data: ReactNode }[];
  isAdaptiveHeight?: boolean;
  initialSlideIndex?: number;
  settings?: Settings;
}) => {
  const defaultSettings: Settings = {
    dots: true,
    infinite: isInfinite,
    speed: 500,
    appendDots: (dots) => <ul>{dots}</ul>,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows,
    dotsClass: cn(cs.dots),
    adaptiveHeight: isAdaptiveHeight,
    initialSlide: initialSlideIndex,
    ...settings,
  };
  return (
    <div className={cn(cs.slider, className)}>
      <ReactSlider data-testid="slider" {...defaultSettings} ref={ref && ref}>
        {slides?.map(({ id, data }) => (
          <div className={cs.slide} key={id}>
            {data}
          </div>
        ))}
      </ReactSlider>
    </div>
  );
};
